<script lang="ts" setup>
import { ref } from 'vue';
import {
  getCurrentInstance,
  showLoading,
  hideLoading,
  showToast,
  navigateBack,
} from '@tarojs/taro';
import { ALARM_DEAL_TYPE } from '/@/common/constant';
import { ALARM_DEAL } from '/@/api/modules/base/alarm';
import { formState } from './state';

/**
 * @description 当前路由信息
 */
const params = getCurrentInstance().router?.params as unknown as {
  id: string;
  dealType: keyof typeof ALARM_DEAL_TYPE;
};

const alarmHandleFormRef = ref();

/**
 * @function 上传文件
 * @param imgList
 */
function uploadImageChange(imgList: { key: string; src: string }[]) {
  formState.messageAlarmDealFileDto = imgList.map((i) => {
    return {
      fileType: 1,
      fileUrl: i.src,
      fileName: i.src.split('/').reverse()[0],
    };
  }) as AppMessageAlarm.FileDto[];
}

/**
 * @function 确认提交
 */
function submit() {
  alarmHandleFormRef.value.validate().then(({ valid }) => {
    if (!valid) return;
    showLoading({ title: '加载中...' });

    formState.id = params.id;
    formState.dealType = params.dealType;
    formState.dealTime = new Date().valueOf();

    ALARM_DEAL({ content: formState }).then((res) => {
      hideLoading();
      showToast({
        title: res.comResp.msg || res.comResp.tip || '',
        icon: 'success',
        success() {
          setTimeout(() => {
            navigateBack();
          }, 2000);
        },
      });
    });
  });
}
</script>

<template>
  <view class="alarm-handle app-page--1">
    <app-navbar title="告警处理" />
    <scroll-view class="app-page__wrapper" :scroll-y="true" :lower-threshold="100">
      <view class="alarm-handle__wrapper">
        <nut-form :model-value="formState" ref="alarmHandleFormRef">
          <nut-form-item label="处理方式">
            <view class="alarm-handle__content-wrapper">
              <text>{{ ALARM_DEAL_TYPE[params.dealType] }}</text>
            </view>
          </nut-form-item>
          <nut-form-item>
            <nut-textarea
              v-model="formState.dealDesc"
              placeholder="请输入操作信息"
              rows="8"
              limit-show
              text-align="left"
              max-length="200"
            />
          </nut-form-item>
          <nut-form-item label="上传图片">
            <app-upload-image @on-change="uploadImageChange" module="alarm" />
          </nut-form-item>
        </nut-form>
      </view>
    </scroll-view>
    <view class="alarm-handle__footer">
      <nut-button block shape="round" type="info" @click="submit()"> 提交 </nut-button>
    </view>
  </view>
</template>

<style lang="scss">
@import './index.scss';
</style>
